.page-apps {
  // background-color: #282c34;
  height 100%

  .apps-type-nav{
    height 50px
    padding 8px 0;
    margin 10px auto
  }

  .scrollbar-type-nav{
    display flex
    align-items center
   
    padding 2px
    background-color #f4f1f7
    width fit-content
    border 1px solid rgba(79,89,102,.078)
    border-radius: 20px 
    margin: 0 auto
    // background: var(--chat-bg);
    // width 100%
    li{
      flex-shrink 0
      display flex
      align-items center
      justify-content center
      margin 5px 8px
      height 26px
      border-radius 4px
      // border 1px solid rgb(80,80,80)
      padding 2px 12px
      // background rgba(60,60,60 0.9)
      color var(--theme-text-tertiary)
      font-weight: bold
      font-size 14px
      cursor pointer

      .image {
        width 22px
        height 22px
        overflow hidden
        margin-right 5px
        border-radius 50%
    
      }
      &.active{
        background #fff;
        color: var(--el-color-primary);
        border-radius 20px
      }
    }
  }


  .app-list-container {
    display flex
    color #ffffff
    padding 2px 15px;
    overflow-y visible
    overflow-x hidden

    .item__list-box {
      .item {
        display flex
        flex-flow row
        // border 1px solid rgb(80,80,80)
        padding 10px
        background: var(--chat-bg);
        border-radius 8px

        .image {
          width 80px
          height 80px
          min-width 80px
          border-radius 50%
          overflow hidden
          object-fit: contain
          display: flex
          align-items center
          justify-content center
          flex-shrink 0
          border: 2px solid #f5f7fd
          background: #fff
        }

        .inner {
          display flex
          flex-flow column
          padding 0 0 0 10px
          width 100%

          .info {
            text-align left

            .info-title {
              color: var(--text-theme-color)
              font-size 1.25rem
              line-height 1.75rem
              letter-spacing: .025em;
              font-weight: 600;
              word-break: break-all;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
            }

            .info-text {
              padding 8px 0
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              word-break: break-all;
              height 50px
              font-size: .875rem;
              color var(--text-fb)

            }
          }

          .btn {
            margin-top 10px
            display flex
            justify-content right

            .el-button {
              margin-left 10px

              .el-icon {
                margin-right 5px
              }
            }
          }
        }
      }

    }
  }

}